<template>
  <div class="tooltip" ref="tooltip" v-if="visible">
    <div class="title tc">编辑前数据</div>
    <template v-for="(item, idx) in ths">
      <span
        ref="col"
        class="col inline-b ellipsis"
        :style="{ width: item.offsetWidth + 'px' }"
        :key="idx"
        v-if="idx !== 5 && idx !== 6"
      >
        <span>{{ colData[row.index][attrNames[idx]] }}</span>
      </span>
    </template>
    <div class="arrows"></div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 行数据
    row: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 原始数据
    originalData: {
      type: Array
    }
  },
  data() {
    return {
      ths: [],
      attrNames: ["brand", "spec", "material", "other", "warehouseName"],
      colData: [],
      once: true
    };
  },
  watch: {
    visible(val) {
      if (val) {
        // 首次加载存储原来的商品信息，不可修改
        if (this.once) {
          this.colData = JSON.parse(JSON.stringify(this.originalData));
          this.once = false;
        }
        this.$nextTick(() => {
          this.$refs.tooltip.style.bottom =
            this.$parent.$refs.productInfo.$el.offsetHeight -
            (this.row.e.target.offsetTop - 7) +
            "px";
        });
      }
    }
  },
  methods: {
    init() {
      let tableHead = document.getElementsByClassName("ant-table-thead")[0];
      this.ths = tableHead.getElementsByTagName("th");
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.tooltip {
  position: absolute;
  left: 1px;
  // height: 30px;
  // line-height: 30px;
  background-color: #fff;
  border-radius: 4px;
  z-index: 999;
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
  .title {
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #e8e8e8;
  }
  .col {
    padding: 0 8px;
    height: 30px;
  }
  .arrows {
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
  }
}
</style>
